<template>
  <div>
    <el-form
      :inline="true"
      style="text-align: center"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="搜索订单号">
        <el-input
          v-model="formInline.number"
          placeholder="请输入订单号"
          @keyup.enter="findOrderByMNameUser"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findOrderByOrderNumberUser"
        >查询
        </el-button
        >
      </el-form-item>
      <el-form-item label="搜索订单商品名">
        <el-input
          v-model="formInline.name"
          placeholder="请输入商品名称"
          @keyup.enter="findOrderByMNameUser"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findOrderByMNameUser">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="toUserIndex" round>回到个人中心</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="日期" width="420">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号" width="420">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>订单号: {{ scope.row.orderNumber }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.orderNumber }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="420">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.mname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="deleteOrderByOrderNumber(scope.row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import axios from "axios";
  import {getAllOrders} from '@/api/user'

  export default {
    data() {
      return {
        tableData: {},
        formInline: {
          number: "",
          name: "",
        },
      };
    },
    methods: {
      handleEdit(index, row) {
      },
      handleDelete(index, row) {
        this.id = row.id
      },
      getAllOrdersUser() {
        var that = this;
        getAllOrders({
          uid: this.$store.state.user.uid //从本地store中获取uid
        }).then((res) => {
          that.tableData = res.data.data;
        }).catch((reason => {
          alert("出错了，请重试")
          })
        );
      },
      findOrderByOrderNumberUser() {
        var that = this;
        if (this.formInline.number === "") {
          this.getAllOrdersUser();
        } else {
          axios({
            url: "/findOrderByOrderNumberUser",
            method: "post",
            params: {
              uid: this.$store.state.user.uid, //从本地store中获取uid
              orderNumber: this.formInline.number,
            },
          }).then((res) => {
            that.tableData = res.data.data;
          });
        }
      },
      findOrderByMNameUser() {
        var that = this;
        if (this.formInline.name === "") {
          this.getAllOrdersUser();
        } else {
          axios({
            url: "/findOrderByMNameUser",
            method: "post",
            params: {
              uid: this.$store.state.user.uid, //从本地store中获取uid
              mName: this.formInline.name,
            },
          }).then((res) => {
            that.tableData = res.data.data;
          });
        }
      },
      deleteOrderByOrderNumber(row) {
        var that = this;
        axios({
          url: "/deleteOrderByOrderNumber",
          method: "post",
          params: {
            orderNumber: row.orderNumber,
          },
        }).then((res) => {
          that.tableData = res.data.data;
          this.getAllOrdersUser()
        });
        this.getAllOrdersUser();
      },
      toUserIndex() {
        this.$router.replace({path: '/UserIndex', query: {uid: this.$route.query.uid}})
      },
    },
    created() {
      this.getAllOrdersUser();
    },
  };
</script>
